<template>
	<view class="changeTel">
		<uni-steps :options="step" :active="active" active-color="#f26d24"></uni-steps>
		<view class="yanzheng" v-if="current==0">
			<view class="logo_form">
				<view class="quick_ogon">
					<view class="uni-form-item uni-column"><input class="uni-input" type="number" placeholder="请输入手机号" /></view>
					<view class="uni-form-item uni-column">
						<input class="uni-input" type="text" placeholder="请输入短信验证码" />
						<button class="shortBt" @click="shortBt" plain="true">获取验证码</button>
					</view>
					<button type="warn" class="logoBt" @click="logoBtFn" plain="true">下一步</button>
				</view>
			</view>
			<view class="wenzi">
				若当前手机号已不再使用,你可以在电脑网页上打开猪八戒网,通过
				<text>申请人工申诉</text>
				来取消原有手机的认证信息,然后重新进行绑定
			</view>
		</view>
		<view class="newTel" v-else-if="current==1">
			<view class="changePassword_form" >
				<view class="uni-form-item uni-column">
					<input class="uni-input" type="number" placeholder="请输入手机号" />
				</view>
				<view class="uni-form-item uni-column">
					<input class="uni-input" type="text" placeholder="请输入短信验证码" />
					<button class="shortBt" @click="shortBt"  plain="true">获取验证码</button>
				</view>
				<button type="warn" class="nextStep" @click="nextStepFn" plain="true">下一步</button>
			</view>
		</view>
		<view class="success" v-else="current==2">
			<image src="../../static/img/v_ok_67x67_@2x.png" mode=""></image>
			<view class="">修改成功</view>
		</view>
	</view>
</template>

<script>
import uniSteps from '@/components/uni-steps/uni-steps.vue';
export default {
	components: { uniSteps },
	data() {
		return {
			step: [{ title: '验证原手机' }, { title: '绑定新手机' }, { title: '完成' }],
			active: 0,
			current:0
		}
	},
	methods:{
		logoBtFn(){
			this.current=1
			this.active=1
		},
		nextStepFn(){
			this.current=2
			this.active=2
		}
	}
};
</script>

<style scoped lang="scss">
.uni-steps {
	margin-top:50rpx;
}
.logo_form {
	.uni-column:first-child {
		margin-bottom: 20rpx;
	}
	.uni-input {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #eaeaea;
	}
	.quick_ogon {
		padding: 50rpx;
		.uni-column {
			position: relative;
			.shortBt {
				position: absolute;
				right: 0;
				top: 0;
				width: 210rpx;
				border-radius: 60rpx;
				height: 65rpx;
				line-height: 65rpx;
				font-size: 32rpx;
				background-color: #bbbbbb;
				border-color: #bbbbbb;
				color: #fff;
				transform: translateY(5rpx);
				padding: 0 10rpx;
				background-color: #febe00;
			}
		}
		.logoBt{
				// border-radius: 15rpx;
				// margin-top: 100rpx;
				// color: #fff;
				// font-size: 36rpx;
				// background-color: #fe7615;
				// border-color: #f4c2a3;
				border-radius: 60rpx;
				margin-top: 100rpx;
				color: #ed915d;
				font-size: 36rpx;
				background-color: #f4c2a3;
				border-color: #f4c2a3;
			}
	}
	
}
.wenzi{
		color: #a9a9a9;
		font-size: 28rpx;
		padding: 0 30rpx;
		text{
			color: #ff732c;
			}
	}
.newTel{
	.uni-input{
		height: 80rpx;
		line-height: 80rpx;
		border-bottom:1px solid #eaeaea ;
	}
	.changePassword_form{
		padding: 50rpx;
		border-top: 1px solid #eaeaea;
		.uni-column{
			position: relative;
			margin-bottom: 20rpx;
			.shortBt{
				position: absolute;
				right: 0;
				top: 0;
				width: 210rpx;
				border-radius: 60rpx;
				height: 65rpx;
				line-height: 65rpx;
				font-size: 32rpx;
				border-color: #ed915d;
				color: #ed915d;
				transform: translateY(5rpx);
				padding: 0 10rpx;
			}
		}
		.uni-column:last-child{
			margin-bottom: 0rpx;
		}
	}
	.password_ogon{
		padding: 50rpx;
		.navigatorHover{
			margin-top: 30rpx;
			font-size: 24rpx;
			color: #7d9dc3;
		}
	}
	.nextStep{
		border-radius: 60rpx;
		margin-top: 100rpx;
		color: #ed915d;
		font-size: 36rpx;
		background-color: #f4c2a3;
		border-color: #f4c2a3;
	}
}
.success{
	text-align: center;
	margin-top: 80rpx;
	image{
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 30rpx;
	}
}
</style>
